<script setup>
import LightHeader from "@/components/LightHeader.vue";
import LightFooter from "@/components/LightFooter.vue";
import { reactive, ref, onMounted,onUnmounted } from 'vue';
onMounted(()=>{
    window.scrollTo(0, 0);
})
const comRuleForm = reactive({
    type: '',
    describe: '',
    linked:''
})
const comRuleFormRef = ref()
const comRules = reactive({
    type: [
        { required: true, message: '请输入反馈类型', trigger: 'change' }
    ],
    describe: [
        { required: true, message: '请输入描述内容', trigger: 'change' },
    ],
    linked: [
        { required: true, message: '请输入联系方式', trigger: 'change' },
    ],
})
const sugRuleForm = reactive({
    type: '',
    describe: '',
    linked:''
})
const sugRuleFormRef = ref()
const sugRules = reactive({
    type: [
        { required: true, message: '请输入反馈类型', trigger: 'change' }
    ],
    describe: [
        { required: true, message: '请输入描述内容', trigger: 'change' },
    ],
    linked: [
        { required: true, message: '请输入联系方式', trigger: 'change' },
    ],
})
const sugSubmitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
const comSubmitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<template>
    <div class="wrap">
        <!-- 导航栏 -->
        <el-affix :offset="0">
            <LightHeader />
        </el-affix>
        <header>
            <div class="banner">
                <h2>“有问题，找我们!&nbsp;一站式解决您的困扰。”</h2>
                <div class="describe">
                    <ul>
                        <li>
                            <div class="icon">
                                <img src="@/assets/images/newImg/Frame4.png" alt="#">
                            </div>
                            <p>7*24小时在线服务</p>
                        </li>
                        <li>
                            <div class="icon">
                                <img src="@/assets/images/newImg/Frame5.png" alt="#">
                            </div>
                            <p>随时随地的查看计算，管理与监控</p>
                        </li>
                        <li>
                            <div class="icon">
                                <img src="@/assets/images/newImg/Frame6.png" alt="#">
                            </div>
                            <p>工程师团队全天候保障您的数据安全及任务正常运行</p>
                        </li>
                    </ul>
                </div>
                <div class="btnBox">
                    <el-button color="#2F54EB">咨询客服</el-button>
                </div>
            </div>

        </header>
        <main>
            <!-- 平台使用流程 -->
            <div class="useprocess" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>平台使用流程</h3>
                </div>
                <div class="content">
                    <div class="imgBox">
                        <img src="@/assets/images/newImg/Group309.png" alt="使用流程">
                    </div>
                </div>
            </div>
            <!-- 常见问题 -->
            <div class="issue" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>常见问题</h3>
                </div>
                <div class="content">
                    <div class="leftBox">
                        <div class="ele">
                            <h5>什么是云计算？</h5>
                            <span></span>
                            <p>在数字化时代，互联网已经成为基础设施。云计算使得数据中心能够像一台计算机一样去工作。通过互联网将算力以按需使用、按量付费的形式提供给用户，包括：计算、存储、网络、数据库、大数据计算、大模型等算力形态。云计算一个明显的优势是弹性，能让您按需使用各类服务，灵活扩缩容，从容应对业务流量的不确定性。
                            </p>
                        </div>
                        <div class="ele">
                            <h5>在智能时代，大模型得到空前发展和关注，云计算可以依据业务需求提供哪几种服务模式？</h5>
                            <span></span>
                            <p>基础设施即服务
                                (IaaS)基础设施即服务
                                (IaaS)：提供各类基础设施类能力的服务类别，包括计算、存储、网络等资源服务能力。您无需购买和部署服务器、存储、网络设备等硬件基础设施就可以灵活部署自己的业务系统。平台即服务（PaaS）：提供应用程序所需要的硬件和软件部署平台的服务类别。您无需管理和维护复杂的底层基础架构和操作系统，只需要关注自己的业务逻辑，加速开发效率。模型即服务（MaaS）支持灵活的扩容和缩容，可以按需使用资源，减少因为业务高峰而做IT资源筹备工作，同时也避免了在业务高峰后遗留大量闲置资源，造成不必要的资源浪费。丰富多样的技术产品。
                            </p>
                        </div>
                    </div>
                    <div class="rightBox">
                        <div class="ele">
                            <h5>云计算的优势？</h5>
                            <span></span>
                            <p>支持灵活的扩容和缩容，可以按需使用资源，减少因为业务高峰而做IT资源筹备工作，同时也避免了在业务高峰后遗留大量闲置资源，造成不必要的资源浪费。丰富多样的技术产品、全球部署的基础设施、易上手的产品使用体验，您可以通过云计算轻松地使用各种技术，从而快速完成业务创新，在全球构建您的商业系统。
                            </p>
                        </div>
                        <div class="ele">
                            <h5>云计算的部署模式有哪几种？</h5>
                            <span></span>
                            <p>支持灵活的扩容和缩容，可以按需使用资源，减少因为业务高峰而做IT资源筹备工作，同时也避免了在业务高峰后遗留大量闲置资源，造成不必要的资源浪费。丰富多样的技术产品、全球部署的基础设施、易上手的产品使用体验，您可以通过云计算轻松地使用各种技术，从而快速完成业务创新，在全球构建您的商业系统。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 投诉与建议 -->
            <div class="suggestions" data-aos="fade-up" data-aos-delay="300">
                <div class="title">
                    <h3>投诉与建议</h3>
                    <p>我们珍视每一位用户的意见，用户的满意是我们不懈追求的目标，我们定会积极跟进、及时处理。在此，向您表达我们最诚挚的感谢！</p>
                </div>
                <div class="content">
                    <div class="suggestionsBox">
                        <div class="top">
                            <div class="iconBox">
                                <img src="@/assets/images/newImg/Frame321.png" alt="#">
                            </div>
                            <p>建议反馈</p>
                        </div>
                        <div class="form">
                            <el-form ref="sugRuleFormRef" :model="sugRuleForm" :rules="sugRules"
                                label-width="auto" class="demo-ruleForm" size="default" label-position="left" status-icon>
                                <el-form-item label="类型" prop="type">
                                    <el-input v-model="sugRuleForm.type" />
                                </el-form-item>
                                <el-form-item label="描述" prop="describe">
                                    <el-input v-model="sugRuleForm.describe" type="textarea" />
                                </el-form-item>
                                <el-form-item label="联系方式" prop="linked">
                                    <el-input v-model="sugRuleForm.linked" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button color="#2F54EB" type="primary" @click="sugSubmitForm(sugRuleFormRef)" style="margin: 0 auto;">
                                        提交
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <div class="complaintsBox">
                        <div class="top">
                            <div class="iconBox">
                                <img src="@/assets/images/newImg/Frame322.png" alt="#">
                            </div>
                            <p>投诉反馈</p>
                        </div>
                        <div class="form">
                            <el-form ref="comRuleFormRef" :model="comRuleForm" :rules="comRules"
                                label-width="auto" class="demo-ruleForm" size="default" label-position="left" status-icon>
                                <el-form-item label="类型" prop="type">
                                    <el-input v-model="comRuleForm.type" />
                                </el-form-item>
                                <el-form-item label="描述" prop="describe">
                                    <el-input v-model="comRuleForm.describe" type="textarea" />
                                </el-form-item>
                                <el-form-item label="联系方式" prop="linked">
                                    <el-input v-model="comRuleForm.linked" />
                                </el-form-item>
                                <el-form-item>
                                    <el-button color="#2F54EB" type="primary" @click="comSubmitForm(comRuleFormRef)" style="margin: 0 auto;">
                                        提交
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="lightFooter" data-aos="fade-up" data-aos-delay="300">
                <LightFooter></LightFooter>
            </div>
        </footer>
    </div>
</template>

<style lang="scss" scoped>
@media (max-width: 768px) {
    header {
        width: 1400px !important;
    }
}

.wrap {
    width: 100%;

    header {
        width: 100%;
        overflow: hidden;
        background: url(@/assets/images/newImg/Frame707.png)no-repeat center center/cover;
        padding: 140px 0;
        box-sizing: border-box;

        .banner {
            width: 1400px;
            margin: 0 auto;

            h2 {
                font-weight: 800;
                font-size: 24px;
                line-height: 50px;
            }

            .describe {
                margin-top: 35px;
                margin-left: 20px;

                ul {
                    display: flex;

                    li {
                        display: flex;
                        font-size: 12px;
                        margin-right: 40px;

                        .icon {
                            display: flex;
                            align-items: center;
                        }
                    }
                }
            }

            .btnBox {
                margin-top: 54px;
                margin-left: 20px;

                button {
                    margin-right: 10px;
                    width: 100px;
                }
            }
        }
    }

    main {
        width: 1400px;
        margin: 0 auto;

        .useprocess {
            width: 100%;
            margin-top: 80px;

            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }
            }

            .content {
                margin-top: 80px;
            }
        }

        .issue {
            width: 100%;
            margin-top: 80px;

            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }
            }

            .content {
                margin-top: 70px;
                display: flex;
                justify-content: space-between;

                .leftBox,
                .rightBox {
                    width: 640px;

                    .ele {
                        margin-bottom: 40px;



                        /* 防止文本换行 */
                        h5 {
                            font-weight: 600;

                        }

                        span {
                            width: 75px;
                            height: 3px;
                            display: inline-block;
                            background-image: linear-gradient(to right, #85A5FF 70%, #F0F5FF 70%);
                            /* 使用渐变色设置下边框 */
                        }

                        p {
                            font-size: 14px;
                            margin-top: 15px;
                            line-height: 24px;
                            color: #6D7C90;
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-line-clamp: 4;
                            /* 设置最大显示行数 */
                            -webkit-box-orient: vertical;
                            text-overflow: ellipsis;
                        }

                        p:hover {
                            white-space: normal;
                            /* 悬停时取消文本的nowrap属性，让文本正常显示 */
                            overflow: visible;
                            /* 悬停时取消overflow属性，让文本正常显示 */
                        }
                    }
                }
            }
        }

        .suggestions {
            width: 100%;
            margin-top: 80px;

            .title {
                text-align: center;

                h3 {
                    font-size: 28px;
                    font-weight: 600;
                    display: inline-block;
                }

                p {
                    font-weight: 400;
                    font-size: 14px;
                    color: #99A3B1;
                    margin-top: 50px;
                }
            }

            .content {
                margin-top: 40px;
                display: flex;
                justify-content: space-between;

                .suggestionsBox,
                .complaintsBox {
                    width: 640px;

                    .top {
                        display: flex;
                        align-items: center;
                        background-color: #F0F2F4;
                        padding: 10px 13px;
                        box-sizing: border-box;

                        p {
                            margin-left: 5px;
                            font-weight: 600;
                            font-size: 20px;
                        }

                    }
                    .form{
                        // background-color: skyblue;
                        padding:40px 20px 10px;
                        box-sizing: border-box;
                        border: 1px solid #F0F2F4;
                    }
                }
            }
        }
    }
    footer{
        margin-top: 70px;
    }
}
</style>